<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Reactive Flux Display</title>
    <!-- <script src="https://unpkg.com/rxjs@^7/dist/bundles/rxjs.umd.min.js"></script> -->
    <script th:src="@{/js/rxjs.umd.min.js}"></script>
</head>
<body>
<div>
    <input type="checkbox" id="longChat" />是否开启长对话
    <input type="text" id="inputField" width="20%" placeholder="请输入...">
    <button id="sendButton">提交</button>
    <div id="displayArea"></div>
</div>
<script>
    const uid = new Date().getTime() + '';
    // 自定义的JavaScript代码将放在这里
    document.getElementById('sendButton').addEventListener('click', function() {
        const inputField = document.getElementById('inputField');
        const displayArea = document.getElementById('displayArea');
        const longChat = document.getElementById('longChat').value;

        const input = inputField.value;
        const historyTxt = displayArea.textContent;
        if (input) {
            displayArea.textContent = ""
            let url = `/ai/ollama/streamChat?message=${encodeURIComponent(input)}`;

            if(longChat == "on"){
                url = url + `&history=${encodeURIComponent(historyTxt)}&uid=${uid}`
            }

            fetch(url)
                .then(response => {
                    if (response.ok) return response.body.pipeThrough(new TextDecoderStream()).pipeTo(new WritableStream({
                        write(chunk) {
                            displayArea.textContent += chunk.replace(/data:/g, "").trim();
                        }
                    }));
                })
                .catch(error => console.error('Error:', error));
        }
    });
</script>
</body>
</html>
